<template>
  <div class="main">
    <van-image
      v-if="bool"
      width="100%"
      height="100%"
      src="https://bizaladdin-image.baidu.com/0/pic/325133989_-1505272997_2012359855.gif"
    >
      <van-button
        class="fixed"
        :disabled="num !== '跳过'"
        @click="btn"
        round
        type="info"
        size="mini"
        color="rgba(0,0,0,0.5)"
      >
        {{ num }}
      </van-button>
    </van-image>

    <div class="mid" v-else>
      <van-nav-bar fixed title="登录" />
      <div class="from">
        <van-image
          class="center"
          round
          width="40vw"
          height="40vw"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div v-if="log">
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[
                {
                  required: true,
                  pattern: reg1,
                  message: '字母开头,允许5-16字节,允许字母数字下划线',
                },
              ]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[
                {
                  required: true,
                  pattern: reg2,
                  message:
                    '以字母开头,长度在6~18之间,只能包含字母、数字和下划线',
                },
              ]"
            />
            <div style="margin: 16px">
              <van-button
                round
                block
                type="info"
                native-type="submit"
                @click="loginDone"
                >登录</van-button
              >
            </div>
            <div style="margin: 16px">
              <van-button
                :style="{ backgroundColor: color, borderColor: color }"
                round
                block
                type="info"
                @click="registerfn"
                >注册</van-button
              >
            </div>
          </van-form>
        </div>
        <div v-else>
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[
                {
                  required: true,
                  pattern: reg1,
                  message: '字母开头,允许5-16字节,允许字母数字下划线',
                },
              ]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[
                {
                  required: true,
                  pattern: reg2,
                  message:
                    '以字母开头,长度在6~18之间,只能包含字母、数字和下划线',
                },
              ]"
            />
            <div style="margin: 16px">
              <van-button
                round
                block
                type="info"
                native-type="submit"
                @click="registerDone"
                >注册</van-button
              >
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { registerApi, loginApi } from "@/api/login";
import { login } from "../main";
export default {
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },

    btn() {
      this.bool = false;
    },
    registerfn() {
      this.log = !this.log;
    },
    async registerDone() {
      this.log = !this.log;
      let data = await registerApi({
        username: this.username,
        password: this.password,
      });
      (this.username = ""), (this.password = ""), console.log(data);
    },

    async loginDone() {
      let data = await loginApi({
        username: this.username,
        password: this.password,
      });
      console.log(data);
      if (data.data.status == 0) {
        login(this.username);
        this.$router.push({
          path: "/layout/message",
        });
      } else {
        this.$toast("密码错误");
      }
    },
  },
  created() {
    this.sit = setInterval(() => {
      this.num--;
      if (this.num <= 0) {
        this.num = "跳过";
        clearInterval(this.sit);
      }
    }, 1000);
  },
  data() {
    return {
      // routerlist: "/layout/message",
      color: "#1989fa80",
      username: "",
      password: "",
      num: 1,
      sit: null,
      bool: true,
      status: true,
      log: true,
      reg1: /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,
      reg2: /^[a-zA-Z]\w{5,17}$/,
    };
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100vh;
  background: url("https://im.qq.com/macqq/images/macqq/mod_bg.jpg") no-repeat;
  background-size: cover;
}
.fixed {
  position: fixed;
  right: 4vw;
  top: 5vw;
  z-index: 1;
}
.from {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
.center {
  margin-left: 30vw;
  margin-bottom: 5vh;
}
</style>